<template>
  <el-row :gutter="16">
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <card :data="state.total.user" />
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <card :data="state.total.agent" />
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <card :data="state.total.share" />
    </el-col>
  </el-row>
  <!-- 分销 -PRO- -->
  <!-- <el-row :gutter="16">
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <card :data="state.total.user" />
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <card :data="state.total.share" />
    </el-col>
  </el-row> -->
</template>

<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../../dashboard.service';
  import Card from './card.vue';

  const state = reactive({
    total: {
      user: {
        data: [],
        color: '#806AF6',
        color1: 'rgba(128, 106, 246, 0.4)',
        color2: 'rgba(128, 106, 246, 0)',
        title: '用户数量',
        tip: '今日新增用户',
        footer: '本周新增用户人数',
      },
      // 分销商数量 -PRO-
      agent: {
        data: [],
        color: '#409EFF',
        color1: 'rgba(64, 158, 255, 0.4)',
        color2: ' rgba(64, 158, 255, 0)',
        title: '分销商数量',
        tip: '今日新增人数',
        footer: '本周新增分销商人数',
      },
      share: {
        data: [],
        color: '#21C732',
        color1: 'rgba(33, 199, 50, 0.4)',
        color2: 'rgba(33, 199, 50, 0)',
        title: '分享次数',
        tip: '今日分享次数',
        footer: '本周新增分享次数',
      },
    },
  });

  async function getTotal() {
    const { error, data } = await api.total();
    if (error === 0) {
      state.total.agent.data = data.agent_data;
      // 分销 -PRO-
      // if (state.total?.agent) {
      //   state.total.agent.data = data.agent_data;
      // }
      state.total.share.data = data.share_data;
      state.total.user.data = data.user_data;
    }
  }

  onMounted(() => {
    getTotal();
  });
</script>
